<template>
  <div class="co2emission">
    <div ref="myChart" id="myChart"></div>

<!--    <div class="two">
      <div id="myChart1" ref="myChart1"></div>
      <div id="myChart2" ref="myChart2"></div>
    </div>-->
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "index",
  data() {
    return {
      currentPage:1,//当前显示页数
      totalPage:4,//一共4页
      timerId:null
    }
  },
  mounted() {
    let myChart = echarts.init(this.$refs.myChart);

    let option = {
      legend: {
        bottom: 0,
        data: ['访问', '购买'],
      },
      tooltip: {},
      radar: {
        radius: '60%',
        splitNumber: 8,
        indicator: [
          {
            text: '电脑',
            max: 100,
          },
          {
            text: '充电器',
            max: 100,
          },
          {
            text: '耳机',
            max: 100,
          },
          {
            text: '手机',
            max: 100,
          },
          {
            text: 'Ipad',
            max: 100,
          },
          {
            text: '耳机',
            max: 100,
          },
        ],
      },
      series: [
        {
          type: 'radar',
          symbolSize: 0,
          areaStyle: {
            shadowBlur: 0,
            shadowColor: 'rgba(0,0,0,.2)',
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            opacity: 1,
          },
          data: [
            {
              value: [90, 50, 86, 40, 50, 20],
              name: '访问',
              itemStyle: {
                color: '#b6a2de',
              },
            },
            {
              value: [70, 75, 70, 76, 20, 85],
              name: '购买',
              itemStyle: {
                color: '#5ab1ef',
              },
            },
          ],
        },
      ],
    };
    option = {
      title:{
        text:'日温室气体排放动态监测',
        left: 50,
        top:30
      },
      //滑块部分
      /*dataZoom:[
        {
          type:'slider',
          xAxisIndex: 0,
          start: 50,   // 初始位置为50%
          end: 100,     // 结束位置为100%
          orient: 'vertical',  // 将滑块放在x轴下方
          top: 'bottom'        // 调整滑块距离x轴的距离
        }
      ],*/
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        },
        formatter: function (params) {
          var relVal = params[0].name
          for (var i = 0, l = params.length; i < l; i++) {
            if(params[i].value>35){
              relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '(tCO\u2082)'
            }else{
              relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '(\u2103)'
            }

          }
          return relVal
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['实际温室气体排放', '预测温室气体排放','温度']
      },
      xAxis: {
        type: 'category',
        axisPointer: {
          type: 'shadow'
        },
        data: [
          '8:00','9:00', '10:00','11:00',  '12:00','13:00', '14:00','15:00'
        ],
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid',
            color: 'rgba(226,226,226,0.5)',
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          type: 'value',
          name:'Carbon',
          max: 60,
          splitNumber: 5,
          axisTick: {
            show: false,
          },
          /*axisLabel: {
            formatter: '{value} tCO2'
          },*/
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
            },
          },
        },
        {
          type: 'value',
          name: 'Temperature',
          min: 6,
          max: 30,
          // sacle:true,//脱离0值比例
          interval: 4,
          axisLabel: {
            formatter: '{value} °C'
          },
          scale:true
        }
      ],
      grid: {left: '1%', right: '3%', top: '15  %', bottom: 0, containLabel: true},
      series: [
        {
          name:'实际温室气体排放',
          smooth: true,
          data: [45.6, 44.4, 44.5, 43.8, 45.1, 46.3, 46.2, 44.7],
          type: 'bar',
          areaStyle: {},
          itemStyle: {
            color: '#5ab1ef',
          },
        },
        {
          name:'预测温室气体排放',
          smooth: true,
          data: [45.0, 44.0, 43.5, 42.8, 44.0, 45.0, 44.5, 43.8],
          type: 'bar',
          areaStyle: {},
          itemStyle: {
            color: '#019680',
          },
        },
        {
          name: '温度',
          type: 'line',
          yAxisIndex: 1,
          data: [18,19,20,21,22,23,23,24]
        }
      ],
    }

    myChart.setOption(option);

    // 修改预期值、实际值和温度的数据
    function refreshData() {
      if(this.timerId){
        clearInterval(this.timerId)
      }
      var ExpectedData = [45.0, 44.0, 43.5, 42.8, 44.0, 45.0, 44.5, 43.8, 44.5, 39.5, 40.0, 41.0,
        40.5, 46.0, 47.0, 46.5, 45.0, 44.5, 44.5, 45.0, 44.0, 46.0, 40.0, 38.0]
      var ActualData =[45.6, 44.4, 44.5, 43.8, 45.1, 46.3, 46.2, 44.7, 45.8,
          39.8, 40.5, 41.3, 41.5, 47.2, 48.1, 47.9, 47.1, 46.5, 47.6, 47.8, 47.0, 48.3, 40.1, 38.8]
      var TemperatureData = [18,19,20,21,22,23,23,24,23,23,22,22,22,21,21,21,20,20,19,19,18,17,17,17]
      var TimeData = [
        '8:00','9:00', '10:00','11:00',  '12:00','13:00', '14:00','15:00', '16:00','17:00',  '18:00',
        '19:00','20:00','21:00', '22:00','23:00', '0:00','1:00', '2:00','3:00',  '4:00','5:00','6:00','7:00'
      ]
      const start = Math.floor(Math.random() * 3)*8;//0,6,12,18
      // alert(start)
      // 模拟新的数据
      var newExpectedData = [ExpectedData[start], ExpectedData[start+1], ExpectedData[start+2], ExpectedData[start+3], ExpectedData[start+4], ExpectedData[start+5],ExpectedData[start+6],ExpectedData[start+7]];
      var newActualData = [ActualData[start],ActualData[start+1], ActualData[start+2],ActualData[start+3], ActualData[start+4], ActualData[start+5],ActualData[start+6],ActualData[start+7]];
      var newTemperatureData = [TemperatureData[start],TemperatureData[start+1],TemperatureData[start+2], TemperatureData[start+3], TemperatureData[start+4], TemperatureData[start+5],TemperatureData[start+6],TemperatureData[start+7]];
      var newTimeData = [TimeData[start],TimeData[start+1],TimeData[start+2],TimeData[start+3],TimeData[start+4],TimeData[start+5],TimeData[start+6],TimeData[start+7]];
      /*// 获取当前数据
      var expectedData = option.series[0].data;
      var actualData = option.series[1].data;
      var temperatureData = option.series[2].data;
      // 删除前11个元素
      expectedData.splice(0, 11);
      actualData.splice(0, 11);
      temperatureData.splice(0, 11);
      // 添加新的11个元素到末尾
      Array.prototype.push.apply(expectedData, newExpectedData);
      Array.prototype.push.apply(actualData, newActualData);
      Array.prototype.push.apply(temperatureData, newTemperatureData);*/

      // 更新图表数据
      myChart.setOption({
        series: [
          { name: '实际温室气体排放', data:newActualData  },
          { name: '预测温室气体排放', data: newExpectedData },
          { name: '温度', data: newTemperatureData }
        ],
        xAxis:{
          data:newTimeData
        }
      });
    }

// 定时刷新数据
    this.timerId = setInterval(refreshData, 3000);

      window.addEventListener("resize", () => {
      myChart.resize()
    })

    /*this.showData()
    this.showData2()*/
  },
  destroyed() {
    clearInterval(this.timerId)
  },
  methods: {
    showData() {
      let myChart = echarts.init(this.$refs.myChart1, 'light');

      let option = {
        legend: {
          bottom: 0,
          data: ['访问', '购买'],
        },
        tooltip: {},
        radar: {
          radius: '60%',
          splitNumber: 8,
          indicator: [
            {
              text: '电脑',
              max: 100,
            },
            {
              text: '充电器',
              max: 100,
            },
            {
              text: '耳机',
              max: 100,
            },
            {
              text: '手机',
              max: 100,
            },
            {
              text: 'Ipad',
              max: 100,
            },
            {
              text: '耳机',
              max: 100,
            },
          ],
        },
        series: [
          {
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
              shadowBlur: 0,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1,
            },
            data: [
              {
                value: [90, 50, 86, 40, 50, 20],
                name: '访问',
                itemStyle: {
                  color: '#b6a2de',
                },
              },
              {
                value: [70, 75, 70, 76, 20, 85],
                name: '购买',
                itemStyle: {
                  color: '#5ab1ef',
                },
              },
            ],
          },
        ],
      };


      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '1%',
          left: 'center',
        },
        series: [
          {
            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
            name: '当日温室气体排放参数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '12',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
           /* data: [
              {value: 982.4, name: '燃料燃烧'},
              {value: 59.7, name: '工业生产'},
              {value: 201, name: '电力热力'},
              {value: 10.3, name: '固碳产品'},
            ],*/
            animationType: 'scale',
            animationEasing: 'exponentialInOut',
            animationDelay: function () {
              return Math.random() * 100;
            },
          },
        ],
      }

      option = {
        tooltip: {
          trigger: 'item',
        },

        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '80%',
            center: ['50%', '50%'],
            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
            data: [
              /*{value: 982.4, name: '燃料燃烧'},
              {value: 59.7, name: '工业生产'},
              {value: 201, name: '电力热力'},
              {value: 10.3, name: '固碳产品'},*/
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            animationType: 'scale',
            animationEasing: 'exponentialInOut',
            animationDelay: function () {
              return Math.random() * 400;
            },
          },
        ],
      }

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize()
      })

    },
    showData2() {
      let myChart = echarts.init(this.$refs.myChart2, 'light');

      let option = {
        legend: {
          bottom: 0,
          data: ['访问', '购买'],
        },
        tooltip: {},
        radar: {
          radius: '60%',
          splitNumber: 8,
          /*indicator: [
            {
              text: '电脑',
              max: 100,
            },
            {
              text: '充电器',
              max: 100,
            },
            {
              text: '耳机',
              max: 100,
            },
            {
              text: '手机',
              max: 100,
            },
            {
              text: 'Ipad',
              max: 100,
            },
            {
              text: '耳机',
              max: 100,
            },
          ],*/
        },
        /*series: [
          {
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
              shadowBlur: 0,
              shadowColor: 'rgba(0,0,0,.2)',
              shadowOffsetX: 0,
              shadowOffsetY: 10,
              opacity: 1,
            },
            /!*data: [
              {
                value: [90, 50, 86, 40, 50, 20],
                name: '访问',
                itemStyle: {
                  color: '#b6a2de',
                },
              },
              {
                value: [70, 75, 70, 76, 20, 85],
                name: '购买',
                itemStyle: {
                  color: '#5ab1ef',
                },
              },
            ],*!/
          },
        ],*/
      };


      // option = {
      //   tooltip: {
      //     trigger: 'item',
      //   },
      //   legend: {
      //     bottom: '1%',
      //     left: 'center',
      //   },
      //   series: [
      //     {
      //       color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
      //       name: '访问来源',
      //       type: 'pie',
      //       radius: ['40%', '70%'],
      //       avoidLabelOverlap: false,
      //       itemStyle: {
      //         borderRadius: 10,
      //         borderColor: '#fff',
      //         borderWidth: 2,
      //       },
      //       label: {
      //         show: false,
      //         position: 'center',
      //       },
      //       emphasis: {
      //         label: {
      //           show: true,
      //           fontSize: '12',
      //           fontWeight: 'bold',
      //         },
      //       },
      //       labelLine: {
      //         show: false,
      //       },
      //       data: [
      //         {value: 1048, name: '搜索引擎'},
      //         {value: 735, name: '直接访问'},
      //         {value: 580, name: '邮件营销'},
      //         {value: 484, name: '联盟广告'},
      //       ],
      //       animationType: 'scale',
      //       animationEasing: 'exponentialInOut',
      //       animationDelay: function () {
      //         return Math.random() * 100;
      //       },
      //     },
      //   ],
      // }

      myChart.setOption(option);

      window.addEventListener("resize", () => {
        myChart.resize()
      })
    },
  }
}
</script>

<style scoped>
#myChart {
  width: 100%;
  height: 500px;
}

#myChart1 {
  width: 500px;
  height: 500px;
  float: left;
}

#myChart2 {
  width: 500px;
  height: 500px;
  float: left;
}
</style>
